<template>
  <div>
    <dl>
      <dt class="clearfix">
        <div class="cell">{{$t('subaccount.currency')}}</div>
        <div class="cell">{{$t('statistics.rate')}}</div>
        <div class="cell">{{$t('home.full_network_force')}}</div>
        <div class="cell">{{$t('home.dug_income')}}</div>
        <div class="cell">{{$t('dashboard.calculation_curve')}}</div>
        <div class="cell">{{$t('home.help')}}</div>
      </dt>
      <dd v-for="(v,i) in list" :is="v" :coin_data="data[v] || { suanli: '', money: '', unit: '' }" :key="i"></dd>
    </dl>
  </div>
</template>
<script>
import { coinstats } from '@/api';
import btc from './tr/btc';
import bch from './tr/bch';
import bsv from './tr/bsv';
import eth from './tr/eth';
import dcr from './tr/dcr';
import zec from './tr/zec';
import etp from './tr/etp';

export default {
  components: {
    btc,
    bch,
    bsv,
    eth,
    dcr,
    zec,
    etp,
  },
  data() {
    return {
      activeList: '',
      data: {},
      list: [
        'btc',
        'bch',
        'bsv',
        'eth',
        'dcr',
        'zec',
        'etp',
      ],
    };
  },
  created() {
    this.getCoinstats();
  },
  methods: {
    getCoinstats() {
      coinstats().then((res) => {
        if (res.data.status === 1) {
          this.data = res.data.data;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
dl{
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 50px;
  background-color: #fff;
  dt{
    background-color: #1dd3ad;
    color: #fff;
    height: 60px;
    line-height: 60px;
  }
  dd{
    background-color: #fff;
  }
  /deep/ .cell{
    float: left;
    font-size: 18px;
    text-align: center;
    &:nth-of-type(1){
      width: 230px;
      padding: 0 40px 0 70px;
    }
    &:nth-of-type(2){
      width: 130px;
    }
    &:nth-of-type(3){
      width: 210px;
    }
    &:nth-of-type(4){
      width: 180px;
    }
    &:nth-of-type(5){
      width: 210px;
    }
    &:nth-of-type(6){
      width: 200px;
      padding-right: 70px;
    }
    .index-echarts{
      display: inline-block;
      width: 94px;
    }
  }
}
</style>

